<template>
	<view class="page-body">
		<view class="nav-bar">
			<view style="margin-right: 10px;">
				<!-- 自定义按钮区域开始 -->
				<el-button type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="addBtn">添加
				</el-button>
				<!-- 自定义按钮区域结束 -->
			</view>
			<!-- 表格搜索组件开始 -->
			<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" :show-reset="true"
				@search="search">
			</vk-data-table-query>
			<!-- 表格搜索组件结束 -->
		</view>

		<!-- 表格组件开始 -->
		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
			:pagination="true" :right-btns="['detail_auto', 'update', 'delete']" @update="updateBtn" @delete="deleteBtn" :custom-right-btns="table1.customRightBtns">
		</vk-data-table>
		<!-- 表格组件结束 -->

		<!-- 添加或编辑的弹窗开始 -->
		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="700px" top="4vh" mode="form">
			<vk-data-form ref="form1" v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
				:form-type="form1.props.formType" :columns='form1.props.columns' label-width="60px" max-height="700px"
				@success="form1.props.show = false;refresh();"></vk-data-form>
		</vk-data-dialog>
		<!-- 添加或编辑的弹窗结束 -->
	</view>
</template>

<script>
	var that;
	var vk = uni.vk; // vk实例
	var originalForms = {}; // 表单初始化数据
	var placeData = [
		{ value: 1, label: '首页' },
		{ value: 2, label: '列表' }
	];
	var statusData = [
		{ value: true, label: "启用", tagType: "success" },
		{ value: false, label: "禁用", tagType: "danger" }
	];
	export default {
		data() {
			return {
				// 查询表单请求数据
				queryForm1: {
					// 查询表单数据源，可在此设置默认值
					formData: {},
					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
					columns: [
						{ key: "name", placeholder: "名称关键词", type: "text", width: 160, mode: "%%" },
						{ key: "place", placeholder: "所在位置", type: "select", width: 160, mode: "in",
							data: placeData
						},
						{ key: "status", placeholder: "状态", type: "select", width: 160, mode: "in",
							data: statusData
						},
					]
				},
				// 表格相关开始 -----------------------------------------------------------
				table1: {
					// 表格数据请求地址
					action: "admin/slideshow/sys/getList",
					// 表格字段显示规则
					columns: [
						{ key: "name", title: "名称", type: "text", width: 160 },
						{ key: "image", title: "图片", type: "image", width: 100 },
						{ key: "type", title: "类型", type: "tag", width: 160,
							data: [{
								value: 1,
								label: "轮播图",
								tagType: "success"
							}]
						},
						{ key: "place", title: "显示位置", type: "html", width: 160,
							formatter: (val, row, column, index) => {
								let newStr = '';
								val.forEach((item) => {
									placeData.forEach((item2) => {
										if(item === item2.value) {
											newStr += '【' + item2.label + '】';
										}
									})
								})
								return newStr
							}
						},
						{ key: "client", title: "客户端", type: "html", width: 300,
							formatter: (val, row, column, index) => {
								let newStr = '';
								val.forEach((item) => {
									vk.getVuex('$app.config.platform').forEach((item2) => {
										if(item.localeCompare(item2.value) === 0) {
											newStr += '【' + (item2.label || '') + '】';
										}
									})
								})
								let str = `<text>${ newStr }</text>`;
								return str
							}
						},
						{ key: "sort", title: "排序", type: "number", width: 100, precision: 0, defaultValue: 0 },
						{ key: "_add_time", title: "添加时间", type: "time", width: 180, valueFormat: "yyyy-MM-dd hh:mm:ss" },
						{ key: "status", title: "状态", type: "tag", width: 80,
							data: statusData
						}
					],
					size: "medium",
					// 多选框选中的值
					multipleSelection: [],
					// 当前高亮的记录
					selectItem: ""
				},
				form1: {
					// 请求表单数据, 此处可以设置默认值
					data: {
						type: 1,
						urlType: 1,
						place: [1],
						client: ['mp-weixin'],
						sort: 0,
						status: true
					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "",
						// 表单字段显示规则
						columns: [
							{ key: "name", title: "名称", type: "text", showLabel: true, "showWordLimit": true },
							{ key: "type", title: "类型", type: "radio", showLabel: true, optionType: "button", size: "mini",
								data: [{
									value: 1,
									label: "轮播图"
								}]
							},
							{ key: "image", title: "图片", type: "file-select", showLabel: true, limit: 1, listType: "picture-card", fileSize: 2, sizeUnit: "MB", tips: "推荐比例750:375" },
							{ key: "urlType", title: "计划", type: "radio", optionType: "button", size: "mini",
								data: [
									{ value: 1, label: "不跳转" },
									{ value: 2, label: "作品" },
									{ value: 3, label: "小程序" },
									{ value: 4, label: "公众号/链接" },
									{ value: 5, label: "页面" },
								],
								onChange: (val, formData, column, index, option) => {
									this.form1.data.urlType = 1;
								
									setTimeout(() => {
										return formData.urlType = val
									}, 100)
								}
							},
							{ key: "goods_id", title: "作品", type: "remote-select", 
								action: "admin/goods/sys/getList",
								props: {
									list: "rows",
									value: "_id",
									label: "name"
								},
								actionData: () => {
									return {
										goodsType: that.form1.data.urlType
									}
								},
								showRule: (formData) => {
									if (formData.urlType === 2) {
										return true
									} else {
										return false
									}
								}
							},
							{ key: "appId", title: "appId", type: "text",
								showRule: (formData) => {
									if (formData.urlType === 3) {
										return true
									} else {
										return false
									}
								}
							},
							{ key: "path", title: "路径", type: "text",
								showRule: (formData) => {
									if (formData.urlType === 3) {
										return true
									} else {
										return false
									}
								}
							},
							{ key: "url", title: "链接", type: "text",
								showRule: (formData) => {
									if (formData.urlType === 4) {
										return true
									} else {
										return false
									}
								}
							},
							{ key: "pageUrl", title: "页面", type: "text",
								showRule: (formData) => {
									if (formData.urlType === 5) {
										return true
									} else {
										return false
									}
								}
							},
							{ key: "place", title: "位置", type: "checkbox", data: placeData, optionType: "button", size: "mini" },
							{ key: "client", title: "客户端", type: "checkbox", optionType: "button", size: "mini",
								data: vk.getVuex('$app.config.platform')
							},
							{ key: "sort", title: "排序", type: "number", precision: 0, tips: "值越大，越靠前" },
							{ key: "trial", title: "过审", type: "switch", showLabel: true, activeValue: true, tips: "开启后，该内容支持一键下架，方便小程序过审" },
							{ key: "status", title: "状态", type: "switch", showLabel: true, activeValue: true }
						],
						// 表单对应的验证规则
						rules: {
							name: [{
								required: true,
								message: '名称为必填字段，长度在2-10之间',
								trigger: 'blur'
							}],
							type: [{
								required: true,
								message: '类型为必选字段，任意选择一个',
								trigger: 'blur'
							}],
							image: [{
								required: true,
								message: "图片为必传字段，上传图片",
								trigger: 'blur'
							}],
							urlType: [{
								required: true,
								message: "计划为必传字段",
								trigger: 'blur'
							}],
							place: [{
								required: true,
								message: "位置为必传字段，用于显示位置",
								trigger: "blur"
							}]
						}
					},
					// add 代表添加 update 代表修改
					formType: '',
					// 是否显示表单1 的弹窗
					show: false
				}
			}
		},
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
			},
			
			// 表单重置
			resetForm() {
				vk.pubfn.resetForm(originalForms, that);
			},
			
			// 搜索
			search() {
				that.$refs.table1.query();
			},
			
			// 刷新
			refresh() {
				that.$refs.table1.refresh();
			},

			// 显示添加页面
			addBtn() {
				that.resetForm()
				that.form1.props.action = 'admin/slideshow/sys/add';
				that.form1.props.formType = 'add';
				that.form1.props.title = '添加';
				that.form1.props.show = true;
			},
			
			// 显示修改页面
			updateBtn({ item }){
				that.form1.props.action = 'admin/slideshow/sys/update';
				that.form1.props.formType = 'update';
				that.form1.props.title = '编辑';
				that.form1.props.show = true;
				that.form1.data = item;
			},
			
			// 删除按钮
			deleteBtn({ item, deleteFn }){
				deleteFn({
					action:"admin/slideshow/sys/delete",
					data:{
						_id: item._id
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		display: flex;
		justify-content: left;
	}
</style>
